<template>
  <div class="search-box">
    <div class="site utility">
      <span>收货地址：</span>
      <div class="site-box">
        <span class="site-input" @click="openMap">
          <el-input
            v-model="addressText"
            class="input-style"
            placeholder="点击选择收货地址"
          >
            <i slot="prefix" class="iconfont icon-site site" />
          </el-input>
        </span>
        <div class="site-content num" @click="openNumberDialog(0)">
          <span>采购数量：</span>
          <div class="number-box">
            <div class="minus">-</div>
            <div class="con">{{ urlData.buyNum }}</div>
            <div class="plus">+</div>
          </div>
          <span class="unit">{{ urlData.childCategory.categoryUnit }}</span>
        </div>
        <div class="site-content range" @click="openNumberDialog(1)">
          <span>搜索范围：</span>
          <el-input v-model="urlData.searchRange" />
          <span class="unit">km</span>
        </div>
      </div>
    </div>
    <div class="nature utility">
      <span>已选属性：</span>
      <div class="">
        <span>{{ urlData | formatPropInfo }}</span>
        <button class="amend" @click="openPropDialog">修改属性信息</button>
      </div>
    </div>
    <div class="brand utility">
      <span>品牌：</span>
      <brand-list ref="brandList" :selected-brand="brandList" :condition="urlData" @refreshCondition="refreshCondition" />
    </div>
    <div class="serve utility">
      <span>服务：</span>
      <div class="condition" @click="lookCondition">仅看库存充足</div>
    </div>
    <!--地图-->
    <ChooseMap v-if="showMap" @concel="cancel" @submitMap="submitMap" />
    <!--采购数量 和 搜索范围 弹出框-->
    <el-dialog
      :title="numberDialog.title"
      :visible.sync="numberDialog.show"
      width="538px"
      class="dialog"
      :before-close="closeNumberDialog"
    >
      <div v-if="numberDialog.state === 0" class="purchase">
        <span>采购数量：</span>
        <el-input-number v-model="numberDialog.value" :controls="false" />
        <span class="unit">{{ urlData.childCategory.categoryUnit }}</span>
      </div>
      <div v-else class="purchase">
        <span>搜索范围：</span>
        <el-input-number v-model="numberDialog.value" :controls="false" :min="1" :max="300" />
        <span class="unit">km</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitNumberDialog">确 定</el-button>
        <el-button @click="closeNumberDialog">取 消</el-button>
      </span>
    </el-dialog>
    <!--属性弹出框-->
    <prop-dialog :url-data="urlData" :prop-dia-log="propDiaLog" @submitDialog="refreshCondition" />
  </div>
</template>

<script>
import ChooseMap from '@/components/ChooseMap'
import PropDialog from './PropDialog'
import BrandList from './BrandList'
export default {
  name: 'SearchBox',
  components: {
    BrandList,
    ChooseMap,
    PropDialog
  },
  filters: {
    // 格式化 属性
    formatPropInfo(val) {
      let data = `${val.mainCategory.categoryName} > ${val.childCategory.categoryName}, `
      if (val.childCategory.standardProa) {
        data += `${val.childCategory.standardProa}：${val.info.proa}, `
      }
      if (val.childCategory.standardProb) {
        data += `${val.childCategory.standardProb}：${val.info.prob}, `
      }
      if (val.childCategory.standardProc) {
        data += `${val.childCategory.standardProc}：${val.info.proc}, `
      }
      if (val.childCategory.standardProd) {
        data += `${val.childCategory.standardProd}：${val.info.prod}, `
      }
      if (val.childCategory.standardProe) {
        data += `${val.childCategory.standardProe}：${val.info.proe}, `
      }
      return data.substring(0, data.length - 2)
    }
  },
  props: {
    brandList: {
      type: Object,
      required: true
    },
    urlData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showMap: false,
      // 数字弹出框
      numberDialog: {
        title: '',
        show: false,
        state: '',
        value: ''
      },
      // 分类属性弹出框
      propDiaLog: {
        show: false

      }

    }
  },
  computed: {
    addressText() {
      return `${this.urlData.address.receiveProvince ? this.urlData.address.receiveProvince : ''}-${this.urlData.address.receiveCity ? this.urlData.address.receiveCity : ''}-${this.urlData.address.receiveDistrict ? this.urlData.address.receiveDistrict : ''}-${this.urlData.address.receiveAddress ? this.urlData.address.receiveAddress : ''}`
    }
  },
  methods: {
    // 点击收货地址弹出地图
    openMap() {
      this.showMap = true
    },
    // 关闭地图
    cancel() {
      this.showMap = false
    },
    // 提交地图
    submitMap(address) {
      this.urlData.address = address
      const end = address.latitude.toString() + ',' + address.longitude.toString()
      // console.log('0000000', JSON.parse(Base64.decode(this.$route.params.data)))
      this.$store.commit('SEARCH_RESULT', end)
      this.showMap = false
      this.$emit('refreshCondition')
    },
    // 仅看库存充足
    lookCondition() {
      if (this.urlData.skuNumFlag === 'Y') {
        delete this.urlData.skuNumFlag
      } else {
        this.$set(this.urlData, 'skuNumFlag', 'Y')
      }
      this.$emit('refreshCondition')
    },
    // 打开数字弹出框 0 为采购数量 1 为 搜索范围
    openNumberDialog(type) {
      this.numberDialog.state = type
      this.numberDialog.show = true
      if (type === 0) {
        this.numberDialog.title = '采购数量'
        this.numberDialog.value = this.urlData.buyNum
      } else if (type === 1) {
        this.numberDialog.title = '搜索范围'
        this.numberDialog.value = this.urlData.searchRange
      }
    },
    // 关闭数字弹出框
    closeNumberDialog() {
      this.numberDialog.show = false
      this.numberDialog.title = ''
      this.numberDialog.value = ''
      this.numberDialog.state = ''
    },
    // 提交数字弹出框
    submitNumberDialog() {
      if (this.numberDialog.state === 0) {
        // 采购数量
        this.urlData.buyNum = this.numberDialog.value
      } else if (this.numberDialog.state === 1) {
        // 搜索范围
        this.urlData.searchRange = this.numberDialog.value
      }
      this.closeNumberDialog()
      this.$emit('refreshCondition')
    },
    // 打开属性弹出框
    openPropDialog() {
      this.propDiaLog.show = true
    },
    // 提交属性弹出框
    refreshCondition(type) {
      this.$emit('refreshCondition', type)
    }
  }
}
</script>

<style lang='scss' scoped >
  .search-box {
    background: #ffffff;
    padding: 30px 0 30px 30px;
    margin-bottom: 20px;
    .utility {
      display: flex;
      line-height: 30px;
      position: relative;
      .condition{
        cursor: pointer;
      }
    }
    .nature {
      .amend {
        width: 102px;
        height: 21px;
        background: #02a9f1;
        color: #ffffff;
        text-align: center;
        line-height: 21px;
        font-size: 12px;
        cursor: pointer;
        margin-left: 20px;
        border-radius: 4px;
      }
    }
    .site-box {
      display: flex;
      width: 800px;
      justify-content: space-between;
      align-items: center;
      .site-content {
        display: flex;
        align-items: center;
        .unit {
          margin-left: 16px;
        }
        .number-box{
          width: 130px;
          display: flex;
          height: 26px;
          .plus{
            width: 29px;
            border: 1px solid #DCDFE6;
            text-align: center;
            line-height: 21px;
            font-size: 21px;
          }
          .con{
            width: 74px;
            border-top: 1px solid #DCDFE6;
            border-bottom: 1px solid #DCDFE6;
            text-align: center;
            line-height: 28px;
          }
          .minus{
            width: 29px;
            text-align: center;
            line-height: 20px;
            font-size: 30px;
            border: 1px solid #DCDFE6;
          }
        }
      }
      .input-style{
        position: relative;
        .site{
          position: absolute;
          left: 16px;
        }
      }
    }
  }
  .purchase {
    display: flex;
    align-items: center;
    justify-content: center;
    .unit {
      margin-left: 15px;
    }
  }
  /deep/ .search-box {
    .el-form-item__label {
      width: 106px !important;
    }
  }
  /deep/.site-input {
    .el-input {
      width: 230px;
    }
    .el-input__inner{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      width: 100%;
    }
  }
  /deep/ .range {
    .el-input {
      width: 74px;
    }
  }
  /deep/ .num {
    .el-input-number {
      width: 150px;
    }
  }
  /deep/ .range-box {
    .el-input {
      width: 126px;
    }
  }
  /deep/ .purchase {
    .el-input {
      width: 126px;
    }
  }
  /deep/ .dialog {
    .el-dialog__footer {
      display: flex;
      justify-content: center;
      .el-button--primary {
        width: 110px;
        height: 37px;
        background: #ff3b30;
        color: #ffffff;
        border: none;
      }
      .el-button--default {
        width: 110px;
        height: 37px;
        border: 1px solid #e5e5e5;
        background: #e5e5e5;
        color: #6b6b6b;
      }
    }
  }
  /deep/ .amending {
    display: flex;
    justify-content: center;
    padding-right: 91px;
    .el-input {
      width: 236px;
    }
  }
</style>
